<template>
  <div class="apirequestbody">
      <div class="requestbodydiv" style="float: left">
        <span class="requestbodyspan1">&nbsp;Body 请求参数</span>
        <span class="requestbodyspan2 fs12 plr5 ptb2 mr5">JSON</span>
        <span class="requestbodyspan2 fs12 plr5 ptb2 mr5">最外层结构为：Object</span>
        <span class="requestbodyspan3 fs12 plr5 ptb2 mr5">生成预览数据</span>
      </div>
    <!--<div class="searchIten" style="float: right">-->
      <!--<span class="selectBtn"><i class="iconfont">&#xe605;</i>列表项</span>-->
    <!--</div>-->
    <div>
      <div>
        <el-table
          v-if="reqParamType === 'FormData'"
          :data="requestBodyTableFormData"
          border
          style="width: 100%;margin-top: 15px;">
          <!--<el-table-column width="50">-->
            <!--<template slot-scope="scope">-->
              <!--<span v-if="scope.row.addRow">添加</span>-->
              <!--<i v-else class="el-icon-sort"></i>-->
            <!--</template>-->
          <!--</el-table-column>-->
          <el-table-column  label="参数名" >
            <template slot-scope="scope">
              {{scope.row.parameterName}}
            </template>
          </el-table-column>
          <el-table-column  label="类型">
            <template slot-scope="scope" >
              {{scope.row.type}}
            </template>
          </el-table-column>
          <el-table-column   align="center" label="必填">
            <template slot-scope="scope" >
              <span v-if="scope.row.required==1">是</span>
              <span v-else>否</span>
            </template>
          </el-table-column>
          <el-table-column label="说明">
            <template slot-scope="scope" >
              {{scope.row.explain}}
            </template>
          </el-table-column>
          <el-table-column  label="限制">
            <template slot-scope="scope" >
              {{scope.row.limit}}
            </template>
          </el-table-column>
          <el-table-column  label="示例">
            <template slot-scope="scope" >
              {{scope.row.example}}
            </template>
          </el-table-column>
          <!--<el-table-column label="更多操作" width="260">-->
            <!--<template slot-scope="scope">-->
              <!--<el-button type="text">更多设置</el-button>-->
              <!--<el-button type="text">插入</el-button>-->
              <!--<el-button type="text" @click="removeRow(scope.$index, 'requestBodyTableFormData')">删除</el-button>-->
            <!--</template>-->
          <!--</el-table-column>-->
        </el-table>
        <el-table
          v-if="reqParamType === 'JSON'"
          :data="requestBodyTableJson"
          border
          style="width: 100%;margin-top: 15px;">
          <el-table-column  label="参数名" >
            <template slot-scope="scope">
              {{scope.row.parameterName}}
            </template>
          </el-table-column>
          <el-table-column  label="类型">
            <template slot-scope="scope" >
              {{scope.row.type}}
            </template>
          </el-table-column>
          <el-table-column   align="center" label="必填">
            <template slot-scope="scope" >
              <span v-if="scope.row.required==1">是</span>
              <span v-else>否</span>
            </template>
          </el-table-column>
          <el-table-column label="说明">
            <template slot-scope="scope" >
              {{scope.row.explain}}
            </template>
          </el-table-column>
          <el-table-column  label="限制">
            <template slot-scope="scope" >
              {{scope.row.limit}}
            </template>
          </el-table-column>
          <el-table-column  label="示例">
            <template slot-scope="scope" >
              {{scope.row.example}}
            </template>
          </el-table-column>
        </el-table>
        <el-table
          v-if="reqParamType === 'XML'"
          :data="requestBodyTableXML"
          border
          style="width: 100%;margin-top: 15px;">
          <el-table-column  label="参数名" >
            <template slot-scope="scope">
              {{scope.row.parameterName}}
            </template>
          </el-table-column>
          <el-table-column  label="类型">
            <template slot-scope="scope" >
              {{scope.row.type}}
            </template>
          </el-table-column>
          <el-table-column   align="center" label="必填">
            <template slot-scope="scope" >
              <span v-if="scope.row.required==1">是</span>
              <span v-else>否</span>
            </template>
          </el-table-column>
          <el-table-column label="说明">
            <template slot-scope="scope" >
              {{scope.row.explain}}
            </template>
          </el-table-column>
          <el-table-column  label="限制">
            <template slot-scope="scope" >
              {{scope.row.limit}}
            </template>
          </el-table-column>
          <el-table-column  label="示例">
            <template slot-scope="scope" >
              {{scope.row.example}}
            </template>
          </el-table-column>
        </el-table>
        <div class="rawTextArea" v-if="reqParamType === 'Raw'">
          <codeMirror ref="rawTextareaDom" :refName="refName"  :value="textAreaValue"></codeMirror>
        </div>
        <div v-if="reqParamType === 'Binary'" style="margin-top: 14px;">
          {{this.reqParamBinaryDesc}}
        </div>
      </div>
      <!--<el-table-->
        <!--:data="tableData"-->
        <!--size="small"-->
        <!--border-->
        <!--class="elementTable"-->
        <!--header-cell-class-name="elementTableHeader"-->
        <!--cell-class-name="elementTableBody"-->
        <!--highlight-current-row>-->
        <!--<el-table-column  width="300" align="center" label="参数名" prop="headerName"></el-table-column>-->
        <!--<el-table-column  width="150"-->
                          <!--align="center"-->
                          <!--label="类型"-->
                          <!--prop="type"-->
                          <!--:filters="[{ text: '[string]', value: '[string]' }]"-->
                          <!--:filter-method="filterTag">-->
        <!--</el-table-column>-->
        <!--<el-table-column  width="100" align="center" label="必含" prop="required"-->
                          <!--:filters="[{ text: '是', value: '是' },{ text: '否', value: '否' }]"-->
                          <!--:filter-method="filterRequired"></el-table-column>-->
        <!--<el-table-column  width="300" align="center" label="说明" prop="remarks"></el-table-column>-->
        <!--<el-table-column  width="300" align="center" label="限制" prop="remarks"></el-table-column>-->
        <!--<el-table-column   align="center" label="示例" prop="headerValue"></el-table-column>-->
        <!--<el-table-column   width="150" align="center"  label="全部展开" >-->
          <!--<template slot-scope="scope">-->
            <!--<span  v-if="control" @click="oncontrol" style="color: #00a0e9">展开</span>-->
            <!--<span  v-else @click="oncontrol1" style="color: #00a0e9">收缩</span>-->
          <!--</template>-->
        <!--</el-table-column>-->
      <!--</el-table>-->
  </div>
  </div>
</template>

<script>
  import codeMirror from '@/components/codeMirror'
  export default {
    name: 'apiState',
    props: {
      form: {},
      editData: {}
    },
    components: {
      codeMirror
    },
    data() {
      return {
        control: true,
        tableData: [],
        requestBodyTableFormData: [],
        requestBodyTableJson: [],
        requestBodyTableXML: [],
        reqParamType: 'FormData',
        textAreaValue: '',
        dataArr: this.form,
        reqParamBinaryDesc: ''
      }
    },
    created() {
      this.reqParamType = this.editData.reqParamType
      this.textAreaValue = this.editData.reqParamRaw
      this.reqParamBinaryDesc = this.editData.reqParamBinaryDesc
      if (this.editData.reqParamType == 'FormData') {
        this.requestBodyTableFormData = this.editData.reqBodyInfo
      }
      if (this.editData.reqParamType == 'JSON') {
        this.requestBodyTableJson = this.editData.reqBodyInfo
      }
      if (this.editData.reqParamType == 'XML') {
        this.requestBodyTableXML = this.editData.reqBodyInfo
      }
      // if (this.editData.reqParamType == 'Raw') {
      //   this.requestBodyTableXML = this.editData.reqBodyInfo
      // }
      if (this.editData.reqParamType == 'Binary') {
        this.textareaBinary = this.editData.textareaBinary
      }
    },
    methods: {
      oncontrol() {
        this.control = false
      },
      oncontrol1() {
        this.control = true
      },
      filterTag(value, row) {
        return row.type === value
      },
      filterRequired(value, row) {
        return row.required === value
      },
      burlChangeVal() {
        this.$emit('changeFormFun', this.dataArr)
      }
    }
  }
</script>

<style scoped>
</style>
